<script setup>
import router from "@/router/index.js";

</script>

<template>
<div class="mental-box">
  <div class="top">
    <div class="box1" @click="router.push('/user/profile/AIMentalSelfHelpUse')"></div>
    <div class="box2" @click="router.push('/user/profile/MentalAssessmentReport')"></div>
    <div class="box6" @click="router.push('/user/profile/SupportSolution')"></div>
  </div>
  <div class="bottom">
    <div class="box3" @click="router.push('/user/profile/AICounselingReport')"></div>
    <div class="box4" @click="router.push('/user/profile/FaceCounselingRecords')"></div>
    <div class="box5" @click="router.push('/user/profile/FaceInterventionRecords')"></div>
  </div>
</div>
</template>

<style scoped>
.mental-box {
  height: 530px;
  background-image: url('@/assets/images/user/profile/mental/bg.png');
  background-position: 50px 0px;
  background-repeat: no-repeat;
  background-size: contain;
}
.mental-box .top {
  display: flex;
}
.box1 {
  margin-left: 374px;
  margin-top: 55px;
  width: 190px;
  height: 190px;
  background-image: url('@/assets/images/user/profile/mental/AI心理自助使用情况.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.box1:hover {
  background-size: 100%;
}
.box2 {
  margin-top: 46px;
  margin-left: 34px;
  width: 180px;
  height: 180px;
  background-image: url('@/assets/images/user/profile/mental/心理测评报告.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90%;
  transition: all 0.2s ease;
  cursor: pointer;
}
.box2:hover {
  background-size: 100%;
}
.box6 {
  margin-top: 25px;
  margin-left: 100px;
  width: 180px;
  height: 180px;
  background-image: url('@/assets/images/user/profile/mental/智能个性化支持方案.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90%;
  transition: all 0.2s ease;
  cursor: pointer;
}
.box6:hover {
  background-size: 100%;
}
.mental-box .bottom {
  position: relative;
  height: 200px;
}
.box3 {
  position: absolute;
  top: -80px;
  left: 210px;
  width: 200px;
  height: 200px;
  background-image: url('@/assets/images/user/profile/mental/AI心理咨询报告.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.box3:hover {
  background-size: 100%;
}
.box4 {
  position: absolute;
  left: 510px;
  bottom: 32px;
  width: 200px;
  height: 200px;
  background-image: url('@/assets/images/user/profile/mental/线下咨询记录.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.box4:hover {
  background-size: 100%;
}
.box5 {
  position: absolute;
  left: 750px;
  bottom: 80px;
  width: 200px;
  height: 200px;
  background-image: url('@/assets/images/user/profile/mental/线下干预记录.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.box5:hover {
  background-size: 100%;
}
</style>